import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 8,
    marginVertical: 4,
  },
  playButton: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 1,
    elevation: 1,
  },
  progressContainer: {
    flex: 1,
  },
  progressTrack: {
    height: 4,
    backgroundColor: "#e0e0e0",
    borderRadius: 2,
    marginBottom: 4,
  },
  progressFill: {
    height: 4,
    backgroundColor: "#1AAD19",
    borderRadius: 2,
  },
  timeContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  currentTime: {
    fontSize: 12,
    color: "#666",
  },
  duration: {
    fontSize: 12,
    color: "#999",
  },
  // 针对语音消息气泡的样式
  audioBubble: {
    maxWidth: "80%",
  },
  // 语音消息的容器
  audioMessageContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 4,
  },
  // 语音消息的图标
  audioIcon: {
    marginRight: 8,
  },
  // 语音消息的持续时间标签
  durationLabel: {
    fontSize: 12,
    color: "#888",
    marginLeft: 8,
  },
});

export default styles;
